<template>
    <div>
        <index-nav></index-nav>
        <a-row>
            <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:20, offset: 2}" class="contain">
                <div class="attention">
                    <div>考试须知</div>
                    <ul>
                        <li>请使用报名培训的账号参加考试，只有报名了培训的账号才能参加相应培训的考试。 例如，你因为忘记密码等原因注册了多个账号，但只有报名了培训的那个账号才能参加相应考试。 请到 个人首页 的“已报名记录”中查看是否已报名了你要参加考试的培训。</li>
                        <li>每个人有两次考试机会，60分及格，第一次考试不及格的，可以参加第二次考试（第一次考试及格的，不能再参加第二次考试）</li>
                        <li>若两次考试均不及格，不再安排其他考试，需要参加下一次培训。</li>
                        <li>考试分数可以在个人首页 的 “已报名记录” 中的 “查看信息” 中查看成绩。</li>
                        <li>正式考试时间为一小时，时间结束后不能再提交试卷。考试时只能提交一次试卷，提交试卷后，将显示你的得分，若第一轮考试及格，会显示考试及格的页面，凭此页面离开考场。</li>
                        <li>正式考试时有作弊检测，请勿进行离开答题页面、更换设备等疑似作弊的动作，否则将作作弊标记。</li>
                        <li>请提前 15 分钟左右登陆系统，开考时可能有五分钟到十分钟的卡顿。</li>
                        <li>若提交时出现错误，请刷新页面重试，如果还是有错误，请更换浏览器。</li>
                    </ul>
                </div>
                <a-space style="margin-top: 10px;margin-bottom: 10px;">
                    <a-select v-model:value="trainObject" style="width: 140px">
                        <a-select-option :value="0">入党积极分子</a-select-option>
                        <a-select-option :value="1">发展对象</a-select-option>
                        <a-select-option :value="2">预备党员</a-select-option>
                    </a-select>
                    <a-button @click="$router.push('/train/' +trainObject)">在线练习</a-button>
                    <a-button @click="$router.push('examTest')">
                        自我测试
                    </a-button>
                </a-space>
                <div>
                    <a-spin :spinning="loadingExamList">
                        <h2>当前考试列表</h2>
                        <a-table :columns="columns"
                                 :data-source="examList"
                                 rowKey="examId"
                                 :defaultExpandAllRows="true">
                            <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
                                <div v-for="(examSession, index) in record.deptExamList"
                                     :key="examSession.examDeptStatusId"
                                     style="padding-bottom: 5px"
                                >
                                    <a-row style="font-size: 15px;">
                                        <a-col :xs="{span: 24}" :lg="{span:8}">
                                            <span>{{ record.examName + '第'+examSession.repeatCount +'轮'}}</span>
                                            <span style="margin-left: 8px;">
                                                <a-tag color="blue" v-if="examSession.status === 0">
                                                    未开始
                                                </a-tag>
                                                <a-tag color="green" v-if="examSession.status === 1">
                                                    进行中
                                                </a-tag>
                                                <a-tag v-if="examSession.status === 2">
                                                    已结束
                                                </a-tag>
                                            </span>
                                        </a-col>
                                        <a-col :xs="{span: 24}" :lg="{span:8}">
                                             <span>
                                                时间：
                                                {{examSession.startTime ? examSession.startTime : '待定'}}
                                                至
                                                {{examSession.endTime ? examSession.endTime : '待定'}}
                                            </span>
                                        </a-col>
                                        <a-col :xs="{span: 24}" :lg="{span:4}">
                                             <span>
                                                <a-button type="primary"
                                                          class="enter-exam-button"
                                                          size="small"
                                                          v-if="examSession.status === 1"
                                                          @click="$router.push(`realExam/${examSession.examDeptStatusId}`)"
                                                >
                                                  进入考试
                                                </a-button>
                                            </span>
                                        </a-col>
                                    </a-row>




                                </div>
                            </div>
                        </a-table>
                    </a-spin>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
  import IndexNav from '@/views/components/IndexNav'
  import { getExamDetail } from '../../api/exam'
  const columns = [
    {
      title: '考试编号',
      dataIndex: 'examId',
      key: 'examId'
    },
    {
      title: '考试名称',
      dataIndex: 'examName',
      key: 'examName',
    },
    {
      title: '考试时长',
      dataIndex: 'totalTime',
      key: 'totalTime'
    },
    {
      title: '允许考试次数',
      dataIndex: 'maxRepeatCount',
      key: 'maxRepeatCount'
    }
  ];
  export default {
    name: "ExamIndex",
    components: { IndexNav },
    data() {
      return {
        loadingExamList: false,
        trainObject: 0,
        columns,
        examList: [
        ]
      }
    },
    created() {
      this.getExamDetailList()
    },
    methods: {
      getExamDetailList() {
        this.loadingExamList = true;
        getExamDetail().then(res => {
          this.examList = res.data;
          this.loadingExamList = false;
          console.log(this.examList)
        })
      }
    }
  }
</script>

<style scoped>
.contain {
    padding: 0 10px;
}
.attention {
    background-color: #d9edf7;
    border-radius: 3px;
    padding: 5px 5px;
}
.attention div:first-child{
    font-weight: bold;
}
/deep/ .ant-table-expanded-row {

}
/deep/ .ant-table-body {
    background: white;
}
.enter-exam-button {
}
</style>
